<template>
    <div class="box box5">
        <!-- <ImmersiveNavbar title="眨眨眼" /> -->
        <img class="image" :src="bgImg" alt="" @click="goToBox6">
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import bgImg from '@/assets/img/06.jpg'

const router = useRouter()
function goToBox6() { router.push('/box6') }
</script>

<script>
/* global plus */
export default {
    name: 'BoxFive'
    ,
    mounted() {
        document.addEventListener('plusready', this.handleBackButton);
    }, methods: {
        handleBackButton() {
            if (typeof plus !== 'undefined' && plus.key) {
                plus.key.addEventListener('backbutton', () => {
                    if (this.$route.path !== '/box1') {
                        this.$router.push('/box3');
                    } else {
                        if (confirm('再按一次退出应用')) {
                            plus.runtime.quit();
                        }
                    }
                });
            }
        },
    },
    created() {
        setTimeout(() => {
            this.$router.push('/box6')
        }, 500);
    },
    beforeUnmount() {
        // 移除监听
        document.removeEventListener('plusready', this.handleBackButton);
    }
}
</script>

<style scoped>
.box {
    width: 375px;
    height: 100vh;
    /* position: absolute; */

    position: relative;
    /* overflow: hidden; */


}

.image {
    opacity: 0.5;
    /* ...已有样式... */
    animation: slideInFromLeft 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.1s both;
    /* position: absolute; */
    width: 100vw;
    /* height: 100vh; */
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(90px) translateY(-115px);
    }

    to {
        opacity: 0.5;
        transform: translateX(0) translateY(-115px);
    }
}
</style>